<!-- 
    description:购物车界面下面的结算栏
    author:张湘
    date:2018-08-27
-->

<template>
    <div id="cartFoot">
        <div class="footer-result">
            <p>金额：</p>
            <p><span>{{ totalPrice }}</span>元</p>
        </div>
        <router-link :to="{name: ''}" class="footer-goon" >继续购物</router-link>
        <router-link :to="{name: 'pay', params: {'total': totalPrice}}" class="footer-pay" ><div @click="pay()">去结算</div></router-link>
    </div>    
</template>

<script>
    export default {
        data() {
            return {
                
            }
        },
        props: ['totalPrice'],
        computed: {
            carLists() {
                return this.$store.state.details.cartList
            }
            // totalPrice() {
            //     return this.$store.state.details.totalPrice
            // }
        },
        methods: {
            pay() {
                this.$store.dispatch('selected')
            }
        }
    }
</script>

<style lang="less" scoped>
    #cartFoot {
        width: 100%;
        height: 16vw;
        display: flex;
        align-items: center;
        position: fixed;
        bottom: 0;
        left: 0;
        background-color: #ffffff;
        .footer-result,
        a {
            flex: 1;
            text-align: center;
            color: #000;
        }

        .footer-result {
           p:first-of-type{
               color: red;
           }
           p:last-of-type span{
               color: orange;
           }
        }
    }

    .footer-goon {
        background-color: #f4f4f4;
        line-height: 16vw;
    }

    .footer-pay {
        background: orange;
        line-height: 16vw;
        color: #fff;
    }
</style>